import React,{ Component } from 'react';
import { Modal, Button, Input, Checkbox } from 'antd';

import 'styles/components/template/enhanceSelectEmployee/enhanceSelectEmployee.scss';
import {messages} from "share/common";

const Search = Input.Search;
const CheckboxGroup = Checkbox.Group;

class SelectEmployee extends Component{

  render(){
    const { modalOption, leftSelectOptions, rightSelectOptions, sendButton, backButton, leftSearch, rightSearch,
      leftAllCheckedOption, rightAllCheckedOption } = this.props;
    return (
      <div>
        <Modal {...modalOption} wrapClassName='enhance-select-employee-group'>
          <div className='content-box'>
            <div className='base-select-box'>
              <div className='base-title'>
                <Checkbox {...leftAllCheckedOption}>
                  {`${leftSelectOptions.value.length}/${leftSelectOptions.options.length}`}
                </Checkbox>
                <span>{messages('components.key553')/*待选区*/}</span>
              </div>
              <div className='base-content'>
                <Search className='search-box' {...leftSearch}
                  placeholder={messages('common.please.enter'/*请输入*/)}
                />
                <CheckboxGroup className='base-checkbox' {...leftSelectOptions}/>
              </div>
            </div>
            <div className='operation-button'>
              <Button {...sendButton} type='primary' className='button'>{`${messages('components.key532')}>`/*加入使用*/}</Button>
              <Button {...backButton} type='primary' className='button'>{`<${messages('components.key533'/*回到待选*/)}`}</Button>
            </div>
            <div className='base-select-box'>
              <div className='base-title'>
                <Checkbox {...rightAllCheckedOption}>
                  {`${rightSelectOptions.value.length}/${rightSelectOptions.options.length}`}
                </Checkbox>
                <span>{messages('components.key534'/*使用列表*/)}</span>
              </div>
              <div className='base-content'>
                <Search className='search-box' {...rightSearch}
                  placeholder={messages('common.please.enter'/*请输入*/)}
                />
                <CheckboxGroup className='base-checkbox' {...rightSelectOptions}/>
              </div>
            </div>
          </div>
        </Modal>
      </div>
    )
  }

}

export default SelectEmployee;
